<template>
  <el-dialog title="课堂详情统计" :close-on-click-modal="false" :destroy-on-close="true" width="600px" :visible.sync="isShow" :before-close="closeBox">
    <div class="online-historyBox" v-if="onlineLesson&&info">
      <div class="online-title">课题：{{onlineLesson.resourceLessonName || '-'}}</div>
      <div class="online-item">课程：{{onlineLesson.lessonProject || '-'}}</div>
      <div class="online-item">主讲：{{onlineLesson.speaker || '-'}}</div>
      <div class="online-item">班级：{{onlineLesson.classNames || '-'}}</div>
      <div class="online-item">人数：{{onlineLesson.stuNum || '-'}}人</div>
      <div class="online-item">时间：{{onlineLesson.startTime || '-'}} - {{onlineLesson.endTime || '-'}}</div>
      <div class="online-historyCon">
        <div class="online-historyCont">
          <div class="online-historyKey">互动活动</div>
          <div class="online-historyKey">{{info.activityNum >= 0 ? info.activityNum : '-'}}项</div>
        </div>
        <div class="online-historyCont">
          <div class="online-historyKey">参与</div>
          <div class="online-historyKey">{{info.participateNum >= 0 ? info.participateNum : '-'}}项</div>
        </div>
        <div class="online-historyCont">
          <div class="online-historyKey">没参与</div>
          <div class="online-historyKey">{{info.noParticipateNum >= 0 ? info.noParticipateNum : '-'}}项</div>
        </div>
        <div class="online-historyCont">
          <div class="online-historyKey">参与度</div>
          <div class="online-historyKey">{{info.participateRate >= 0 ? info.participateRate + '%' : '-'}}</div>
        </div>
      </div>
      <div class="online-title">互动活动明细</div>
      <el-table :data="info.displayJson" border style="width: 100%">
        <el-table-column prop="date" label="互动类型" width="140">
          <template slot-scope="scope">
            <span v-if="scope.row.type === '1'">点名签到</span>
            <span v-if="scope.row.type === '3'">即时测验</span>
            <span v-if="scope.row.type === '4'">分享展示</span>
          </template>
        </el-table-column>
        <el-table-column prop="studentNum" label="总人数" width="140">
        </el-table-column>
        <el-table-column prop="studentInNum" label="参与人数" width="140">
        </el-table-column>
        <el-table-column prop="rate" label="参与度">
          <template slot-scope="scope">
            <span>{{scope.row.rate >= 0 ? scope.row.rate + '%' : '-'}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import { getHistoryOnlineLessonStatInfo } from '@/api/teacher/onlineCourse'
export default {
  props: ['id', 'onlineLesson'],
  data () {
    return {
      isShow: true,
      info: undefined
    }
  },
  methods: {
    async getHistoryOnlineLessonStatInfo () {
      const res = await getHistoryOnlineLessonStatInfo({ onlineLessonId: this.id })
      if (res.code === '200') {
        this.info = res.data
      }
    },
    closeBox () {
      this.$emit('handleEmit')
    }
  },
  mounted () {
    this.getHistoryOnlineLessonStatInfo()
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .share-left {
    float: left;
    width: 400px;
    height: 400px;
    padding: 20px 10px;
    text-align: center;
    background: #fff;
    border: 1px solid #eee;
    overflow-y: scroll;
  }
  .media-box {
    width: 378px;
    height: 300px;
    .video {
      width: 378px;
      height: 300px;
      outline: none;
    }
  }
</style>
